<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:text-align="http://www.w3.org/1999/xhtml">
<head>
    <title>草稿箱</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--&lt;!&ndash; Font Awesome &ndash;&gt;-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--&lt;!&ndash; Ionicons &ndash;&gt;-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link href="/dist/plugins/ztreem/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=4a6c1b54">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <!--easyui-->
    <link href="/dist/plugins/easyui/themes/icon.css" rel="stylesheet" type="text/css"/>
    <link href="/dist/plugins/easyui/themes/default/menu.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        .hidden {
            display: none;
        }

        .hunstyle {
            background: #9d9d9d;
        }

        .readed td {
            font-weight: bold;
        }

        .table > thead > tr > th {
            border: 1px solid #ddd;
        }

        #tbList tr td:first-child i {
            width: 6px;
            height: 6px;
            margin: 0 15px;
            background: url("/dist/img/icon-email.png");
            display: inline-block;
        }

        #tbList tr.readed td:first-child i {
            background: url("/dist/img/icon-email-active.png");
        }

        .divCheck{
            width: 80px;
            height: 100%;
            margin-left: 5px;
            line-height: 25px;
        }
        .divCheck input{
            float: left;
            margin-top: 7px;
            margin-right: 5px;
        }
        /***************************所有人员tree************************/
        #allUsers {
            border: 5px solid #a5bacf;
            position: absolute;
            background-color: White;
            left: 300px;
            top: 20px;
            height: 500px;
            width: 700px;
            line-height:0px;
            display:none;
            z-index: 111111;
        }


        #toolBar {
            height: 30px;
            line-height:29px;
            border-bottom: 1px solid #a5bacf;
            width: 100%;
            box-sizing: border-box;
            line-height:0px;
            z-index:9999;
        }

        #toolBar .search-text {
            box-sizing: border-box;
            height:24px;
            text-indent:3px;
            border:0 none;
            width:200px;
            margin-top:0px;
            padding-top:0px;
            position:relative;
            top:-2px;
            margin-bottom:0px;
            outline: none;
        }
        #toolBar .my-close {
            display:inline-block;
            padding:0px;
            margin:0px;
            width:29px;
            height: 29px;
            line-height:25px;
            font-size: 23px;
            cursor: pointer;
            text-align: center;
            font-weight: bold;
        }
        #toolBar .my-close:hover {
            background-color: #c72327;
            font-weight: bold;
            font-size: 25px;
            color: #FFF;
            line-height:23px;
        }
        .search-button {
            width: 14px;
            height: 14px;
            background-image: url(/dist/img/glass.jpg);
            border: 0 none;
            cursor: pointer;
            margin-top:0px;
        }
        input[type=button]{
            outline: none;
        }
        #allUsers .ztree li ul.line
        {
            width:0px;
            background-color:Red;
        }
        #allUsers .bottom_docu
        {
            background: none;
            width: 0px;
        }
        #allUsers .ztree li.fleft
        {
            width: 50px;
            float: left;
            overflow: hidden;
        }
        #control{
            width: 10px;
            right: 0;
            top:0;
            border: 1px solid #000;
            border-top-width: 0;
            border-bottom-width: 0;
            background: #ededed;
            cursor: e-resize;
            height: 100%;
            position: absolute;

        }
        .tmp-line{
            width: 10px;
            right: 0;
            border: 1px solid #000;
            border-top-width: 0;
            border-bottom-width: 0;
            background: #ededed;
            cursor: e-resize;
            height: 100%;
            position: absolute;

        }
    </style>

</head>
<body style="background-color:#fff">
<iframe id="ifAttach" style="display:none"></iframe>
<section class="content" id="app">

                <div class="box-body no-padding box-border"
                     style="overflow: auto;background: #fff;border-right: 10px solid #ededed;">
                    <div class="box-header with-border" style="background: #f7f8fa;">

                        <div class="oa-pager pull-left" style="margin-right: 10px;"><span id="nowPage">1</span>/<span
                                id="allPage">1</span>&nbsp;&nbsp;&nbsp;
                            <span id="prev" class="oa-pager-button">上一页</span> <span id="next" class="oa-pager-button">下一页</span>
                        </div>
                        <div class="clearfix"></div>
                        <!-- /.box-tools -->
                    </div>
                    <div class="box-body no-padding iframeH2" style="overflow: auto;" id="scrollDiv">
                        <div class="table-responsive mailbox-messages">
                            <div id="progress" class="wyui-progress"></div>
                            <div class="wyui-datagrid">
                                <table class="table table-hover ">
                                    <thead>
                                    <tr>
                                        <th class="text-center tableTitle" width="240px;">收件人</th>
                                        <th width="240px;" class="text-center tableTitle">抄送人</th>
                                        <th class="text-center tableTitle">主题</th>
                                        <th width="180px;" class="text-center tableTitle">保存时间</th>
                                        <th class="text-center tableTitle" style="width: 120px;">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tbList">
                                    <tr v-for="email in list_emails" >
                                        <td class="text-left"><span v-for="receivers in email.receivers" class="user">{{receivers.userName}};</span></td>
                                        <td><span v-for="copiers in email.copiers">{{copiers.userName}};</span></td>
                                        <td>{{email.subject}}</td>
                                        <td>{{email.createTime}}</td>
                                        <td class="text-center">
                                            <a href="javascript:void(0);" @click="reply(email)" id="edit">编辑</a>
                                            <a href="javascript:void(0);" @click="deleteDraft(email)" id="delete">删除</a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="control"></div>

</section>

<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--easyui-->
<script src="/dist/plugins/easyui/plugins/jquery.parser.js" type="text/javascript"></script>
<script src="/dist/plugins/easyui/plugins/jquery.menu.js" type="text/javascript"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=602456c3"></script>
<script src="/dist/js/oa.js?t=ff1c9bf8"></script>
<script src="/dist/plugins/vue/vue.js"></script>
<script type="text/javascript" src="/dist/plugins/ztreem/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="/dist/plugins/ztreem/js/jquery.ztree.exedit-3.5.js"></script>
<script type="text/javascript" src="/dist/plugins/ztreem/js/jquery.ztree.exhide-3.5.js"></script>
<script type="text/javascript" src="/dist/plugins/ztreem/js/jquery.ztree.excheck-3.5.js"></script>
<script src="/dist/js/pages/email/drafts.js?v1.18"></script>

<script>
    /************************滚动加载******************************/
    var divscroll = document.getElementById('scrollDiv');
    function divScroll() {
        var wholeHeight = divscroll.scrollHeight;
        var scrollTop = divscroll.scrollTop;
        var divHeight = divscroll.clientHeight;
        console.log(scrollTop + divHeight,wholeHeight)
        if(scrollTop + divHeight >= wholeHeight-2){
//            alert('滚动到底部了！');
            if(isLoad){
                isLoad=false;
                setTimeout( $.wyui.page.getByPage("scroll"),1000);

            }

            //这里写动态加载的逻辑，比如Ajax请求后端返回下一个页面的内容
        }

    }
    divscroll.onscroll = divScroll;
</script>

</body>
</html>